<template>
    <div class="video-item" :id="`video-${options.id}`">
        <div class="inner">
            <video-player class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="playsinline"
                style="object-fit:fill"
                :options="playerOptions"
                @play="onPlayerPlay($event)"
                @pause="onPlayerPause($event)"
                @ended="onPlayerEnded($event)"
                @timeupdate="onPlayerTimeupdate($event)"
                @canplay="onPlayerCanplay($event)"
            ></video-player>
            <div class="bottom">
                <span>600次观看</span>
                <span>05:20</span>
            </div>
        </div>
        <div class="info">
            <div class="title">副部级女将履新香港，她曾让我们与人民日报如此亲近</div>
            <div class="img">
                <img src="static/video.png" alt="">
                <span class="from">虎嗅APP</span>
                <span class="time">2小时前</span>
            </div>
        </div>
    </div>
</template>

<script>
import cache from '@/utils/cache'
export default {
    name: 'file',
    data(){
        return {
            playerOptions : {
                autoplay: false, //如果true,浏览器准备好时开始回放。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4",
                    src: "http://47.75.99.213/userfile/fileupload/video-1.mp4" //url地址
                }],
                poster: "http://47.75.99.213/userfile/2019-02-27/bb707069-b2ae-4ff7-982e-0d96d1a247171.png", //你的封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false,    //时间分隔符
                    durationDisplay: true, //总时间
                    remainingTimeDisplay: false, //倒计时时间
                    currentTimeDisplay: true, // 当前时间
                    volumeControl: false, // 声音控制键
                    playToggle: true, // 暂停和播放键
                    progressControl: true, // 进度条
                    fullscreenToggle: false // 全屏按钮
                }
            }
        }
    },
    props:['options'],
    mounted(){
        this.playerOptions.sources[0].src = this.options.src;
        this.playerOptions.poster = this.options.poster;
        this.id = `video-${this.index}`
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      },
      playsinline(){
    		var ua = navigator.userAgent.toLocaleLowerCase();
                //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                return false
            }else{
                //ios端
                return true				
            }
        }
    },
    methods:{
        onPlayerPlay(player) {
            // console.log('player play!', player.currentTime())
            $(`#video-${this.options.id} .bottom`).hide();
            $(`#video-${this.options.id} .vjs-big-play-button`).hide();
            $(`#video-${this.options.id} .vjs-has-started .vjs-poster`).hide();
            
            this.$emit('sendCurVideoIndex','play',this.options.id)
        },
        onPlayerPause(player) {
            // console.log('player pause!', player.currentTime())
            this.$emit('sendCurVideoIndex','pause',this.options.id)

            // 存储停止video的id和时长
            cache.setSession('video_Active_id',this.options.id)
            cache.setSession('video_Active_id_time',player.currentTime())
        },
        onPlayerEnded(player) {
            // console.log('player ended!', player.currentTime())
            $(`#video-${this.options.id} .vjs-has-started .vjs-poster`).show();
        },
        onPlayerTimeupdate(player) {
            // console.log('player Timeupdate!', player.currentTime())
        },
        onPlayerCanplay(player) {
            // console.log('player Canplay!', player)
            //解决自动全屏
            var ua = navigator.userAgent.toLocaleLowerCase();
            //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
            }else{
                //ios端
                $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true") 
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.video-item{
    .inner{
        position:relative;
        .bottom{
            position:absolute;
            bottom:10px;
            left:15px;
            right:15px;
            color:#fff;
            font-size:12px;
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            span{
                &:last-child{
                    display:inline-block;
                    height:15px;
                    line-height:15px;
                    padding:0 8px;
                    background:rgba(51,51,51,0.5);
                    border-radius:8px;
                }
            }
        }
    }
    .info{
        padding:10px 15px 30px 15px;
        .title{
            font-size:16px;
            margin-bottom:10px;
            color:#333333;
        }
        .img{
            font-size:11px;
            color:#BFBFBF;
            img{
                width:22px;
                height:22px;
                display:inline-block;
                margin-right:10px;
                vertical-align: middle;
            }
            .time{
                margin-left:10px;
            }
        }
    }
}
</style>